<template>
  <div style="height: 100vh;background:#fff;">
    <app-head :title="title"></app-head>
    <div class="content">

        <div v-for="(item,index) in datas">
          <router-link :to="{path:'/article', query:{id:item.id}}" >
          <dl>
            <dt class="tit">{{item.title}}<span v-if="!item.if_read" class="statu">未读</span></dt>
            <dt class="date">{{item.datetime}}</dt>
            <dt class="dec">{{item.describe}}</dt>
          </dl>
          <div class="line"></div>
          </router-link>
        </div>

      <p class="more" @click="moreFn">查看更多</p>
    </div>
  </div>
</template>

<script>
  import AppHead from '@/components/Head'

  export default {
    name: "ArticleList",

    components: {
      AppHead
    },

    data() {
      return {
        title: '政策与指标',
        datas:[]
      }
    },
    created: function () {
      // var that =this
      // window.onscroll = function(){
      //   //变量scrollTop是滚动条滚动时，距离顶部的距离
      //   var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //   //变量windowHeight是可视区的高度
      //   var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //   //变量scrollHeight是滚动条的总高度
      //   var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      //   //滚动条到底部的条件
      //   if(scrollTop+windowHeight==scrollHeight){
      //     //写后台加载数据的函数
      //     that.init()
      //   }
      // }
    },
    mounted:function () {
      this.init()
    },
    methods:{
      init:function () {
        var that =this
        this.$http({
          method: 'get',
          url: '/article/articleList',
        }).then(function (res) {
          var datas = res.data.datas;
          if (res.status == 200) {
            for(var i in datas){
              that.datas.push(datas[i])
            }
            // that.datas.push(datas)
            console.log(that.datas)
          } else {

          }
        }).catch(function (error) {

        })
      },
      moreFn:function () {
        this.init()
      }
    },

  }
</script>
<style lang="less">

</style>
<style scoped lang="less">
  .content {
    background: #fff;
    padding: 5px 16px;
  }

  .content dl {

  }

  .tit {
    font-size: 17px;
    color: #333333;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 80%;
    .statu {
      width: 42px;
      height: 16px;
      background: #4A90E2;
      line-height: 16px;
      font-size: 13px;
      color: #fff;
      padding: 2px 0;
      border-radius: 11px;
      position: absolute;
      right: 16px;
      text-align: center;
    }

  }

  .line {
    height: 1px;
    width: 95%;
    background: rgba(238, 238, 238, 1);
  }

  .date {
    color: #999999;
    opacity: .7;
    font-size: 12px;
    text-align: left;
    margin: 4px 0;
  }

  .dec {
    font-size: 13px;
    color: #777777;
    opacity: .7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: box;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: initial;
    -webkit-box-orient: vertical;
    white-space: initial;
    text-align: left;
  }

  .more {
    height: 21px;
    font-size: 15px;
    color: #ccc;
    padding: 12px 0;
    text-align: center;
  }
</style>
